<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
//引入 tabbar 组件
import TabBar from '@/components/tabbar/index.vue'
//引入 messagepushicon 组件
import messageIcon from '@/basePackage/pages/messagepush/components/icon-push.vue'
//以入 dataItem 数据汇总组件
import dataItem from './components/dataItem.vue'
//引入日期选择组件
import dataSelector from '@/components/selector-data/dataSelector.vue'
//引入结算单列表组件
import statement from './components/statement.vue'
//引入auth组件
import Auth from '@/components/auth/auth.vue'
//引入doGetShopBalance接口 用于请求店铺数据
import { doGetShopBalance, doGetWithdrawList } from '@/apis/finance/index'
import { onLoad } from '@dcloudio/uni-app'
//引入store
import { useshopDataStore } from '@/store/modules/shopdata/index'
import { useScrollViewHeight } from '@/hooks'

// 可视区域滑动高度计算
const { scrollViewHeight } = useScrollViewHeight()

const store = useshopDataStore()
//enum 枚举类型用于tab切换指标筛选
enum Status {
    APPLYING,
    SUCCESS,
    FORBIDDEN,
}
//指标筛选tab数据
const tabList = reactive([
    {
        name: '待审核',
        index: 0,
        current: true,
        status: Status[0],
    },
    {
        name: '已到账',
        index: 1,
        current: false,
        status: Status[1],
    },
    {
        name: '已拒绝',
        index: 2,
        current: false,
        status: Status[2],
    },
])
//控制日历显示隐藏
const showDataSelector = ref(false)
// 单位 rpx
const content_height_data = ref({
    top: 258,
    center: 362,
    dataSelector: 130,
    listTop: 128,
    tabBarHeight: 146,
})
const volumeToHeight = computed(() => {
    const { top, center, dataSelector, listTop, tabBarHeight } = content_height_data.value
    return top + center + dataSelector + listTop + tabBarHeight
})
//店铺数据
interface ShopData {
    data: {
        id: string
        createTime: string
        updateTime: string
        version: number
        deleted: boolean
        shopId: string
        total: string
        undrawn: string
        uncompleted: string
        amountToBeAudited: string
        withdrawalTotal: string
        withdrawing: string
    }
}
const shopData = reactive<ShopData>({
    data: {
        id: '',
        createTime: '',
        updateTime: '',
        version: 0,
        deleted: false,
        shopId: '',
        total: '0.00',
        undrawn: '0.00',
        uncompleted: '0.00',
        amountToBeAudited: '0.00',
        withdrawalTotal: '0',
        withdrawing: '0',
    },
})
//提现记录数据
const statementData = reactive({
    records: [],
})
//切换指标后的待审核等字符串 需要传递到子组件
const status = ref('待审核')
//用于存储切换指标后的index
const statusindex = ref(0)
//创建data 用于储存日期选择器选择的日期
const timeData = reactive({
    startDate: '',
    endDate: '',
})

onLoad(async () => {
    uni.$emit('updateTitle')
    //请求店铺数据
    handleGetShopData()
    //获取当前年月日 结构为 2023-03-10 拼成字符串 月份和日小于10的前面加0
    const date = new Date()
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const day = date.getDate()
    const currentDate = year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day)
    timeData.startDate = currentDate
    timeData.endDate = currentDate
    //请求今天提现记录数据
    const statudata = await doGetWithdrawList({
        startDate: currentDate as string,
        endDate: currentDate as string,
        status: Status[statusindex.value],
    })
    statementData.records = statudata.data.records
    // console.log(statementData.records)
})
/**
 * 请求店铺数据
 */
const handleGetShopData = async () => {
    const data = await doGetShopBalance()
    console.log(data)
    shopData.data = data.data
    // 并且存储到store中
    store.SET_SHOP_DATA(shopData.data)
    console.log(store)
}

/**
 *  控制日历显示隐藏
 */
const handleSelectorData = () => {
    showDataSelector.value = true
}
/**
 * 接受子组件传递的日期
 */
const changeData = async (e: any, value: any) => {
    showDataSelector.value = e
    timeData.startDate = value.startDate
    timeData.endDate = value.endDate
    //请求数据
    const data = await doGetWithdrawList({
        startDate: value.startDate,
        endDate: value.endDate,
        status: Status[statusindex.value],
    })
    statementData.records = data.data.records
    console.log(data)
}
/**
 * 指标筛选tab切换 并且请求数据
 * @param {*} e
 */
interface TabItem {
    name: string
    index: number
    current: boolean
    status: Status
}
const handleChangeTab = async (e: any, item: TabItem, index: number): Promise<void> => {
    //tab切换 传递给子组件的status
    tabList.forEach((item) => {
        item.current = false
    })
    if (item.index === index) {
        item.current = true
    }
    status.value = item.name
    statusindex.value = index
    //请求数据

    const data = await doGetWithdrawList({
        startDate: timeData.startDate,
        endDate: timeData.endDate,
        status: Status[statusindex.value],
    })
    statementData.records = data.data.records
    console.log(data)
}
const handleClose = () => {
    showDataSelector.value = false
}
</script>

<template>
    <scroll-view :scroll-y="true" :style="{ height: `${scrollViewHeight}` }">
        <view class="content">
            <!-- 顶部余额 -->
            <view class="content__top" :style="{ height: content_height_data.top + 'rpx' }">
                <view class="content__top--title title">
                    <view class="title__small">店铺余额</view>
                    <view class="title__total">{{ (Number(shopData.data.undrawn) / 10000).toFixed(2) }}</view>
                </view>
                <view class="content__top--message"> <message-icon></message-icon> </view>
            </view>
            <!-- 中间内容 -->
            <view class="content__center" :style="{ height: content_height_data.center + 'rpx' }">
                <data-item
                    :bccolor="'#4755E9'"
                    :data="(Number(shopData.data.withdrawalTotal) / 10000).toFixed(2)"
                    :title="'累计提现'"
                    :icon="'daijiesuan'"
                    :iconcolor="'#fff'"
                    :titlecolor="'#fff'"
                ></data-item>
                <data-item
                    :bccolor="'#fff'"
                    :data="(Number(shopData.data.withdrawing) / 10000).toFixed(2)"
                    :title="'提现中'"
                    :icon="'daishenhedingdan'"
                    :iconcolor="'#7E7EA8'"
                    :titlecolor="'#333333'"
                >
                </data-item>
            </view>
            <!-- 底部内容 -->
            <view class="content__bottom">
                <!-- 日期选择 -->
                <view
                    class="content__bottom--dataSelector"
                    :style="{ height: content_height_data.dataSelector + 'rpx' }"
                    @click="($event) => handleSelectorData()"
                >
                    {{ timeData.startDate }}-{{ timeData.endDate }}
                    <u-icon name="arrow-down" color="rgba(153, 153, 153, 1)" size="14rpx"></u-icon>
                    <data-selector :show="showDataSelector" @change-data="changeData" @change-close="handleClose"></data-selector>
                </view>
                <!-- 待审核已到账已拒绝等列表 -->
                <view class="content__bottom--list list">
                    <view class="list__top" :style="{ height: content_height_data.listTop + 'rpx' }">
                        <view class="list__top--title">指标筛选</view>
                        <template v-for="(item, index) in tabList" :key="item.name">
                            <view
                                class="list__top--tab"
                                :dataset-id="index"
                                :class="tabList[index].current ? 'list__top--tab-active' : ''"
                                @click="($event) => handleChangeTab($event, item as any, index)"
                                >{{ item.name }}</view
                            >
                        </template>
                    </view>
                    <scroll-view class="list__datalist" scroll-y="true" :style="{ height: `calc(100vh - ${volumeToHeight}rpx)` }">
                        <template v-if="statementData.records.length">
                            <view v-for="item in statementData.records" :key="item">
                                <statement :data="item" :status="status"></statement>
                            </view>
                        </template>
                        <template v-else>
                            <view class="noData">暂无数据</view>
                        </template>
                    </scroll-view>
                </view>
            </view>
        </view>
    </scroll-view>
    <TabBar></TabBar>
    <Auth></Auth>
</template>

<style lang="scss" scoped>
@include b(content) {
    display: flex;
    flex-direction: column;
    @include e(top) {
        height: 258rpx;
        padding: 56rpx 32rpx 0 30rpx;
        display: flex;
        justify-content: space-between;
    }
    @include e(center) {
        display: flex;
        height: 362rpx;
        padding: 0 32rpx;
        justify-content: space-between;
    }
    @include e(bottom) {
        height: 614rpx;
        display: flex;
        flex-direction: column;
        @include m(dataSelector) {
            height: 130rpx;
            line-height: 130rpx;
            color: rgba(153, 153, 153, 1);
            margin-left: 30rpx;
            font-size: 24rpx;
            text-align: left;
            font-family: AlibabaSans-regular;
        }
    }
}
@include b(title) {
    @include e(small) {
        font-size: 24rpx;
        color: rgba(153, 153, 153, 1);
        margin-bottom: 10rpx;
    }
    @include e(total) {
        font-size: 56rpx;
        color: #333333;
        font-weight: 700;
    }
}
@include b(list) {
    border-radius: 50rpx 50rpx 0 0;
    background-color: rgba(252, 252, 252, 1);
    @include e(top) {
        font-size: 24rpx;
        font-family: Arial;
        text-align: center;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 128rpx;
        @include m(title) {
            color: rgba(153, 153, 153, 1);
            font-family: AlibabaSans-regular;
            margin: 0 58rpx 0 28rpx;
        }
        @include m(tab) {
            width: 140rpx;
            height: 64rpx;
            line-height: 64rpx;
            border-radius: 116rpx;
            background-color: rgba(255, 255, 255, 1);
            color: rgba(51, 51, 51, 1);
            box-shadow: 0 4rpx 22rpx 0 rgba(246, 246, 246, 40);
            margin-right: 40rpx;
            font-weight: 700;
        }
        @include m(tab-active) {
            background-color: rgba(71, 85, 233, 1);
            color: rgba(255, 255, 255, 1);
        }
    }
    @include e(datalist) {
        min-height: 350rpx;
    }
}
@include b(noData) {
    font-size: 50rpx;
    color: #999;
    text-align: center;
    line-height: 300rpx;
}
</style>
